<template>
  <div class="base-panels">
    <h2 class="title2">
      <span v-if="type===1">质量监督信息</span>
      <span v-else>安全监督信息</span>
    </h2>
    <table class="show-table">
      <colgroup>
        <col width="136">
        <col width="275">
        <col width="136">
        <col width="275">
      </colgroup>
      <tr>
        <td class="key">
          <span v-if="type===1">质量监督注册号</span>
          <span v-else>安全监督注册号</span>
        </td>
        <td colspan="3">{{ detail?.regNo }}</td>
      </tr>

      <tr>
        <td class="key">报监日期</td>
        <td>{{parseTime(detail?.applyDate)}}</td>
        <td class="key">
          <span v-if="type===1">质量监督机构</span>
          <span v-else>安全监督机构</span>
        </td>
        <td>{{detail?.unit}}</td>
      </tr>
    </table>
  </div>

</template>

<script lang="ts">

interface BaseModel {
  applyDate	?:string;//	报监日期	string(date-time)
  applyId?:string;//		id	string
  regNo?:string;//		注册号	string
  unit?:string;//		监督机构
}

import {defineComponent, inject, onMounted, ref, toRefs} from 'vue';
import { parseTime } from '/@/utils';
import { getSingleQualityApi } from "/@/api/single";
export default defineComponent({
  props:{
    type: {
      type: Number,
      default: 0
    }
  },

  setup(props) {

    const { type } = toRefs(props);
    const singleId = inject('singleId') as string;
    const detail = ref<BaseModel>({});
    const init = async() => {
      let { data , success } = await getSingleQualityApi({singleId,type:type.value});
      success ? detail.value=data : console.log ('接口返回错误')

    }
    onMounted(init);
    return {
      type , parseTime , detail
    }
  },
})
</script>

<style lang="less" scoped>
.base-panels{
  padding: 0 20px 50px;
}

.title2{
  padding: 20px 0 5px;
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 350px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/src/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
